<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>实验页面</title>
    <style>
        /* CSS样式1：设置body背景颜色 */
        body {
            background-color: #f4f4f4;
        }

        /* CSS样式2：设置标题字体颜色 */
        h1 {
            color: #333;
        }

        /* CSS样式3：设置按钮样式 */
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>这是实验页面</h1>
    <p id="message">{{.message }}</p>
    <p>姓名: <span id="name">{{.data.Name }}</span></p>
    <p>年龄: <span id="age">{{.data.Age }}</span></p>

    <button onclick="updateMessage()">更新消息</button>
    <button onclick="sendPostRequest()">发送POST请求</button>

    <script>
        // JS函数1：更新页面消息
        function updateMessage() {
            document.getElementById('message').innerHTML = '消息已更新';
        }

        // JS函数2：发送POST请求
        function sendPostRequest() {
            const data = {
                name: '新用户',
                age: 25
            };
            fetch('/post', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
              .then(response => response.json())
              .then(result => console.log(result))
              .catch(error => console.error('Error:', error));
        }
    </script>
</body>

</html>